<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/managemain' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>排课管理</el-breadcrumb-item>
          <el-breadcrumb-item>空闲教室查询</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="body">
          <el-select v-model="week" multiple placeholder="请选择" clearable class="select">
          <el-option
            v-for="item in weekoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
          <el-select v-model="day" multiple placeholder="请选择" clearable class="select1">
            <el-option
              v-for="item in dayoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="section" multiple placeholder="请选择" clearable class="select2">
            <el-option
              v-for="item in sectionoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="type" multiple placeholder="请选择" clearable class="select3">
            <el-option
              v-for="item in typeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" @click="FCrsearch">搜索</el-button>
          <el-table
            :data="tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column
                  label="序号"
                  prop="id">
            </el-table-column>
            <el-table-column
                  label="教室名称"
                  prop="name">
            </el-table-column>
            <el-table-column
                label="教室类型"
                prop="type">
            </el-table-column>
            <el-table-column
                label="教室位置"
                prop="location">
            </el-table-column>
            <el-table-column
                label="教室状态"
                prop="statusStr">
            </el-table-column>
            <el-table-column
              align="right">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="search"  @click="handleEdit(scope.$index, scope.row)"
                  size="mini"
                  prefix-icon="el-icon-search"
                  placeholder="输入关键字搜索"/>
              </template>
              <template slot-scope="scope">
                <el-button size="mini" type="danger" plain @click="handleDelete(scope.$index, scope.row)">移除</el-button>
                <el-button size="mini" @click="dialogFormVisible = true" type="primary" plain class="add">增加</el-button>
                <el-dialog title="机房增加" :visible.sync="dialogFormVisible">
                  <el-form :model="addform">
                    <el-form-item label="机房名称" :label-width="formLabelWidth">
                      <el-input v-model="addform.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房类型" :label-width="formLabelWidth">
                      <el-input v-model="addform.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房大小" :label-width="formLabelWidth">
                      <el-input v-model="addform.size" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="机房位置" :label-width="formLabelWidth">
                      <el-input v-model="addform.location" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addSubmitForm">确 定</el-button>
                  </div>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      weekoptions: [{
        value: 1,
        label: '第一周'
      }, {
        value: 2,
        label: '第二周'
      }, {
        value: 3,
        label: '第三周'
      }, {
        value: 4,
        label: '第四周'
      }, {
        value: 5,
        label: '第五周'
      }, {
        value: 6,
        label: '第六周'
      }, {
        value: 7,
        label: '第七周'
      }, {
        value: 8,
        label: '第八周'
      }, {
        value: 9,
        label: '第九周'
      }, {
        value: 10,
        label: '第十周'
      }, {
        value: 11,
        label: '第十一周'
      }, {
        value: 12,
        label: '第十二周'
      }, {
        value: 13,
        label: '第十三周'
      }, {
        value: 14,
        label: '第十四周'
      }, {
        value: 15,
        label: '第十五周'
      }, {
        value: 16,
        label: '第十六周'
      }, {
        value: 17,
        label: '第十七周'
      }, {
        value: 18,
        label: '第十八周'
      }, {
        value: 19,
        label: '第十九周'
      }, {
        value: 20,
        label: '第二十周'
      }],
      dayoptions: [{
        value: 1,
        label: '星期一'
      }, {
        value: 2,
        label: '星期二'
      }, {
        value: 3,
        label: '星期三'
      }, {
        value: 4,
        label: '星期四'
      }, {
        value: 5,
        label: '星期五'
      }, {
        value: 6,
        label: '星期六'
      }, {
        value: 7,
        label: '星期日'
      }],
      sectionoptions: [{
        value: 1,
        label: '一二节'
      }, {
        value: 2,
        label: '三四节'
      }, {
        value: 3,
        label: '五六节'
      }, {
        value: 4,
        label: '七八节'
      }, {
        value: 5,
        label: '八九节'
      }],
      typeoptions: [{
        value: '实训实验室',
        label: '实训实验室'
      }, {
        value: 'MAC',
        label: 'MAC'
      }, {
        value: '普通机房',
        label: '普通机房'
      }],
      tableData: [],
      addform: {
        name: '',
        type: '',
        size: '',
        location: ''
      },
      week: '',
      day: '',
      section: '',
      type: '',
      search: '',
      dialogFormVisible: false,
      form: [],
      formLabelWidth: '120px'
    }
  },
  methods: {
    async FCrsearch () {
      await this.$http.post(
        '/arrange/selectEnableLabByTWDS',
        {
          weeks: this.week,
          day: this.day,
          section: this.section,
          type: this.type
        },
        { 'Content-Type': 'application/json' }
      ).then(res => {
        this.tableData = res.data.datas.laboratories
        this.week = ''
        this.day = ''
        this.section = ''
        this.type = ''
        this.$message.success('查询成功')
      })
    },
    async addSubmitForm () {
      this.dialogFormVisible = false
    },
    handleDelete (index, row) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.body{
  position: relative;
  top: 30px;
}
.el-table{
  position: relative;
  top: 30px;
}
.el-button{
  position: flex;
  float: right;
}
.add{
  position: relative;
  left: -10px;
}
.select1{
  width: 20%;
  position: relative;
  left: 4%;
}
.select2{
  width: 20%;
  position: relative;
  left: 8%;
}
.select3{
  width: 20%;
  position: relative;
  left: 12%;
}
.select{
  width: 20%;
}
</style>
